<template>
  <div class="default-main ba-table-box">
    <div class="block">
      <div class="table-block">
        <el-alert class="ba-table-alert"
                  v-if="baTable.table.remark"
                  :title="baTable.table.remark"
                  type="info"
                  show-icon />
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
                     :quick-search-placeholder="t('Quick search placeholder', { fields: '订单号' })">
          <template #month>
            <el-date-picker v-model="baTable.comSearch.form['date']"
                            type="month"
                            placeholder="选择月份"
                            value-format="YYYY-MM" />
          </template>
        </TableHeader>
        <Table></Table>
      </div>
    </div>
    <EditCom ref="editCom"
             :curRow="curRow" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from 'vue'
import { ElMessageBox } from 'element-plus'
import baTableClass from '/@/utils/baTable'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import EditCom from './editCom.vue'
import { useAdminInfo } from '/@/stores/adminInfo'
import Cookies from 'js-cookie'
import { useI18n } from 'vue-i18n'
import { concat } from 'lodash-es'

defineOptions({
    name: 'checkbill/monthFees',
})
const { t } = useI18n()
const editCom: any = ref<InstanceType<typeof EditCom>>()
const curRow = ref({})
const state: {
    buttonLoading: boolean
} = reactive({
    buttonLoading: false
})
const adminInfo = useAdminInfo()
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: 'Info',
        text:  '手动修正',
        type: 'primary',
        icon: '',
        class: 'newButton',
        disabledTip: true,
        display: (row: TableRow, field: TableColumn) => {
            return baTable.auth('updateFees')
        },
        click: (row: TableRow) => {
            curRow.value = { ...row }
            editCom.value.show = true
        }
    }
]
optButtons = concat(defaultOptButtons(['edit', 'delete']), optButtons)
optButtons[1].display = (row) => {
    return row.id != adminInfo.id
}

const baTable = new baTableClass(
    new baTableApi('/checkbill/monthFees/'),
    {
        column: [
            {
                label: '月份',
                prop:  'date',
                operator: '=', 
                align: 'center',
                comSearchRender:'slot',
                comSearchSlotName: 'month',
            },
            {   
                label: '币种', 
                prop: 'currency', 
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: '请输入币种'
            },
            {   
                label: '汇率(人民币)', 
                prop: 'proportion', 
                align: 'center',
                operator: false
            },
            {   
                label: '海外仓运费(美元)', 
                prop: 'storage_fees', 
                align: 'center',
                operator: false
            },
            {   
                label: '头程运费(人民币)', 
                prop: 'first_fees', 
                align: 'center',
                operator: false
            },
            {   
                label: '平台手续费预估', 
                prop: 'platformFee', 
                align: 'center',
                operator: false
            },
            {   
                label: '每日退款预估', 
                prop: 'refund_fee', 
                align: 'center',
                operator: false
            },
            {   
                label: '广告费预估返点率', 
                prop: 'advertisement_rate', 
                align: 'center',
                operator: false
            },
            {
                label: t('Operate'),
                align: 'center',
                width: '100',
                render: 'buttons',
                buttons: optButtons,
                operator: false
            }
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {
            status: '1',
        }
    }
)

provide('baTable', baTable)

baTable.mount()
baTable.getIndex()

</script>

<style scoped lang="scss">
:deep(.el-date-editor.el-input){
    width: var(--el-input-width);
}

</style>
